<template>
    <div>
        <h3>统计数据</h3>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
            <el-tab-pane label="全部" name="first">
                <el-card>
                    <div style="display: inline-block;vertical-align: top;width: 100%;">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <div align="left" style="width: 50%;display: inline-block;vertical-align: top;">
                                <el-form-item>
                                    <el-select v-model="formInline.region" placeholder="全部店铺">
                                        <el-option label="淘宝" value="shanghai"></el-option>
                                        <el-option label="众哲鑫商城" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="formInline.region" placeholder="全部负责人">
                                        <el-option label="赵晓黑" value="shanghai"></el-option>
                                        <el-option label="王小帅" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div align="right" style="width: 49%;display: inline-block;vertical-align: top;">
                                <el-form-item>
                                    <el-button-group>
                                        <el-button>日</el-button>
                                        <el-button>周</el-button>
                                        <el-button>月</el-button>
                                    </el-button-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-date-picker
                                            v-model="formInline.time"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="众哲鑫商城" name="second">
                <el-card>
                    <div style="display: inline-block;vertical-align: top;width: 100%;">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <div align="left" style="width: 50%;display: inline-block;vertical-align: top;">
                                <el-form-item>
                                    <el-select v-model="formInline.region" placeholder="全部负责人">
                                        <el-option label="赵晓黑" value="shanghai"></el-option>
                                        <el-option label="王小帅" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div align="right" style="width: 49%;display: inline-block;vertical-align: top;">
                                <el-form-item>
                                    <el-button-group>
                                        <el-button>日</el-button>
                                        <el-button>周</el-button>
                                        <el-button>月</el-button>
                                    </el-button-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-date-picker
                                            v-model="formInline.time"
                                            type="daterange"
                                            range-separator="~"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <div>
            <div class="commodity"></div>
            <el-card>
                <div>
                    <div align="left" style="width: 1250px;display: inline-block;vertical-align: top">
                        <div style="height: 350px;width: 1220px;border: 1px solid">
                            <a>支付订单数</a>
                            <el-button type="text">支付订单金额</el-button>
                            <el-button type="text">支付客户数</el-button>
                            <div class="tubiao" ref="chart" style="height: 300px;"></div>
                        </div>
                        <div class="commodity"></div>
                        <div style="border: 1px;height: 350px;width: 1220px;border: 1px solid">
                            <a>已完成订单数</a>
                            <el-button type="text">已完成订单金额</el-button>
                            <el-button type="text">已完成客户数</el-button>
                            <!--                                <div class="tubiao" ref="chart" style="height: 300px;"></div>-->
                        </div>
                    </div>
                    <div style="width: 300px;height: 720px;display: inline-block;vertical-align: top;border: 1px solid" align="center">
                        <h4 align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;员工排行榜 TOP-100</h4>
                        <el-button-group>
                            <el-button type="primary">已成交金额</el-button>
                            <el-button type="primary">已成交客户数</el-button>
                        </el-button-group>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/echarts.min.js"></script>
<script>
export default {
    name: "index",
    mounted(){
        this.getEchartData()
    },
    data() {
        return {
            value: '1',
            activeName: 'first',
            formInline: {
                region: '',
                time: '',
            },
        }
    },
    methods: {
        getEchartData() {
            const chart = this.$refs.chart
            if (chart) {
                const myChart = this.$echarts.init(chart)
                const option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
                }
                myChart.setOption(option)
                window.addEventListener("resize", function() {
                    myChart.resize()
                })
            }
            this.$on('hook:destroyed',()=>{
                window.removeEventListener("resize", function() {
                    myChart.resize();
                });
            })
        },
    }
}
</script>

<style scoped>
.commodity {
    height: 20px;
}
</style>